<template>
  <div>
    <template v-if="setting.layout.value === 'side'">
      <t-layout key="side" :class="mainLayoutCls" style="height: 100vh">
        <t-aside id="lg-soar-layout-aside"><layout-side-nav /></t-aside>
        <t-layout>
          <t-header><layout-header /> </t-header>
          <layout-content id="lg-soar-layout-content" />
        </t-layout>
      </t-layout>
    </template>

    <template v-else>
      <t-layout key="no-side" style="height: 100vh">
        <t-header><layout-header /> </t-header>
        <t-layout :class="mainLayoutCls">
          <layout-side-nav id="lg-soar-layout-aside" />
          <layout-content id="lg-soar-layout-content" />
        </t-layout>
      </t-layout>
    </template>
    <setting-modal />
    <login-modal />
  </div>
</template>

<script setup lang="ts">
import '@/soar/style/layout.less';
import { computed, onMounted, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import { useSettingStore, useTabsRouterStore } from '@/store';

import LayoutHeader from './components/LayoutHeader.vue';
import LayoutContent from './components/LayoutContent.vue';
import LayoutSideNav from './components/LayoutSideNav.vue';
import SettingModal from '@/components/SettingModal/index.vue';
import LoginModal from '@/components/Account/LoginModal.vue';

const route = useRoute();
const settingStore = useSettingStore();
const tabsRouterStore = useTabsRouterStore();
const setting = storeToRefs(settingStore);

const mainLayoutCls = computed(() => [{ 't-layout--with-sider': settingStore.showSidebar }]);

const appendNewRoute = () => {
  const { path, fullPath, query, meta, name } = route;
  const { title, isAlive, shared } = meta;
  tabsRouterStore.appendTabRouterList({
    path: shared ? path : fullPath,
    query,
    title: title as string,
    name,
    meta,
    isAlive: isAlive as boolean,
    key: Math.random(),
  });
};

onMounted(() => {
  appendNewRoute();
});

watch(
  () => route.fullPath,
  () => {
    appendNewRoute();
    document.querySelector(`.lg-soar-layout`)?.scrollTo({ top: 0, behavior: 'smooth' });
  },
);
</script>
